<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue';
import { reLaunch } from '@tarojs/taro';
import { MAIN_MENU } from '/@/common/menu';
import { APP_EDITION } from '/@/common/constant';

const props = withDefaults(
  defineProps<{
    /**
     * 当前菜单名称
     */
    active: string;
  }>(),
  {
    active: 'home',
  },
);

const state = reactive<{
  /**
   * 应用版本
   */
  appEdition: keyof typeof APP_EDITION;
  /**
   * 当前菜单名称
   */
  active: string;
}>({
  appEdition: (process.env.APP_EDITION as keyof typeof APP_EDITION) || 'default',
  active: '',
});

/**
 * @function tab切换
 * @param item -选中的tab信息
 */
function tabSwitch(item: { name: string }) {
  reLaunch({ url: MAIN_MENU[item.name].to });
}

watch(props, (newVal) => {
  state.active = newVal.active;
});

onMounted(() => {
  state.active = props.active;
});
</script>

<template>
  <nut-tabbar
    v-model="state.active"
    :class="`app-tab-bar ${state.appEdition}`"
    @tab-switch="tabSwitch"
  >
    <nut-tabbar-item
      v-for="(item, key) in MAIN_MENU"
      :key="key"
      :name="key"
      :tab-title="item.title"
      :icon="item.icon"
    >
      <template v-if="state.appEdition === 'hgy'" #icon="{ active }">
        <image :src="active ? item.imgIconActive : item.imgIcon" />
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<style lang="scss">
.app-tab-bar {
  &.hgy {
    .nut-tabbar-item {
      color: #000;
      font-weight: bold;

      &__icon {
        &--unactive {
          color: #999;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
